<template>
    <div>
        <div>条件</div>
        <n-button type="primary" plain :disabled="disable" @click="onAddConditions" style="margin:0 10px 10px 0">添加条件</n-button>
        <n-button type="primary" plain :disabled="disable" @click="onAddGroup"  style="margin:0 10px 10px 0">添加分组</n-button>
        <conditionGroup v-if="conditionData" v-model="conditionData"></conditionGroup>
    </div>

</template>
<script lang="ts" setup>
import conditionGroup from './conditionGroup.vue'
import { defalutCondition } from './config'
import { computed } from 'vue'
import { ConditionGroupData } from './type'
import { treeDark } from 'naive-ui'

const props = defineProps({
    disable: {
        type: Boolean,
        default: false
    },
    hasGroup: {
        type: Boolean,
        default: false
    },
    modelValue: {
        type: Object as () => ConditionGroupData,
        default: () => {
            return {
                boxType: 'group',
                logic: 'and',
                group: [],
            }
        }
    }
})
const emits = defineEmits(['update:modelValue'])

const conditionData = computed({
    get() {
        return props.modelValue
    },
    set(val: ConditionGroupData) {
        emits('update:modelValue', val)
    }
})
let onAddConditions = () => {
    conditionData.value.group?.push({ ...defalutCondition })
}
let onAddGroup = () => {
    conditionData.value.group?.push({
        boxType: 'group',
        logic: 'and',
        group: [{ ...defalutCondition }, { ...defalutCondition }],
    })
}
const checkData = () => { 
    let pass = true
    conditionData.value.group.forEach(item => {
        if(item.boxType === 'group'){
            pass = checkData(item.group);
        }else{
            if(!item.compare||!item.key||(!item.value&&item.value!==0)){
                pass = false
            }
        }
    });
    return pass
}
defineExpose({
    checkData
})
</script>
<style lang="css">

.condition-group {
    --line-color:#C0C4CC;
    position: relative;
    margin: 0 20px 0 38px;
}
.condition-group .line {
  width: 1px;
  top: 0;
  position: absolute;
  background:var( --line-color);
  left: 0;
  bottom: 0;
}
.condition-group-item{
    position: relative;
}
.condition-group-content .condition-group-item:first-child:before {
  content: "";
  height: 50%;
  position: absolute;
  left: 0;
  width: 1px;
  background: black;
}
.no-top-line:first-child:after{
    display: none;
}
.condition-group-content .condition-group-item:first-child:after {
  content: "";
  width: 10px;
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: var( --line-color);
}
.condition-group-content .condition-group-item:last-child:after {
  content: "";
  width: 10px;
  position: absolute;
  left: 0;
  bottom: 50%;
  height: 1px;
  background: var( --line-color);
}
.condition-group-content .condition-group-item:last-child:before {
  content: "";
  height: 50%;
  position: absolute;
  bottom: 0;
  width: 1px;
  left: 0;
  background: black;
}
.condition-group .condition-group-logic {
  position: absolute;
  bottom: 50%;
  margin-bottom: -17px;
  width: 60px;
  left: -30px;
}
.condition-group .condition-single {
    width: 100%;
    margin: 0 0 20px 20px;
    display: flex;
    align-items: center;
}


.condition-group .condition-group-sub {
  position: relative;
  margin: 0 0 20px 40px;
  padding: 20px 0 0 20px;
  border: 1px dashed var( --line-color);
}
.condition-group .condition-single-opera .n-icon {
  cursor: pointer;
  padding-left: 8px;
  font-size: 16px;
}


.condition-group .condition-group-del {
  cursor: pointer;
  position: absolute;
  right: -8px;
  top: -8px;
  font-size: 16px;
}

</style>